<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS3+JS原生晃动效果</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#box {
				width: 100%;
				height: 500px;
				background: #22252a;
				position: relative;
			}
			
			#box img {
				width: 800px;
				position: absolute;
				right: -60px;
			}
			
			@keyframes re-banner-slide-20 {
				0% {
					opacity: 0;
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes re-banner-slide-40 {
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, 40px, 0);
					-moz-transform: translate3d(0, 40px, 0);
					-ms-transform: translate3d(0, 40px, 0);
					transform: translate3d(0, 40px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes re-banner-slide-60 {
				0% {
					opacity: 0;
					transform: translate3d(0, 60px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes re-banner-slide-80 {
				0% {
					opacity: 0;
					transform: translate3d(0, 80px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes banner-slide-80 {
				0% {
					opacity: 0;
					transform: translate3d(0, -80px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes banner-slide-60 {
				0% {
					opacity: 0;
					transform: translate3d(0, -60px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes banner-slide-40 {
				0% {
					opacity: 0;
					transform: translate3d(0, -40px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			@keyframes banner-slide-20 {
				0% {
					opacity: 0;
					transform: translate3d(0, -20px, 0);
				}
				100% {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
			
			img:nth-of-type(1) {
				z-index: 50;
			}
			
			img:nth-of-type(2) {
				z-index: 100;
			}
			
			img:nth-of-type(3) {
				z-index: 150;
			}
			
			.animating-enter-up img:nth-of-type(1) {
				animation: re-banner-slide-20 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
			}
			
			.animating-enter-up img:nth-of-type(2) {
				animation: re-banner-slide-40 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
			}
			
			.animating-enter-up img:nth-of-type(3) {
				animation: re-banner-slide-60 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
			}
			
			.animating-enter-up img:nth-of-type(4) {
				animation: re-banner-slide-80 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
			}
			
			.animating-enter-down .left-header {
				animation: re-banner-slide-20 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1;
			}
			
			.baselayer {
				z-index: 90;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				transform-style: preserve-3d;
				transition: all 0.5s ease-out;
			}
			
			.banner-row {
				position: relative;
				width: 1200px;
				margin: auto;
				zoom: 1;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div class="baselayer">
				<div class="banner-row animating-enter-up">
					<div class="layer" style="transform:translateZ(50px);">
						<img src="img/banner11.png">
					</div>
					<div class="layer" style="transform: translateZ(100px);">
						<img src="img/banner12.png">
					</div>
					<div class="layer" style="transform: translateZ(150px);">
						<img src="img/banner13.png">
					</div>
				</div>
			</div>
		</div>
		<script>
			var baselayer = document.getElementsByClassName("baselayer");
			var layer = document.getElementsByClassName("layer");
			var i = j = 0;
			var box = document.getElementById("box");
			var w = box.offsetWidth;
			var h = box.offsetHeight;
			box.onmousemove = function(ev) {
				var x = ev.clientX;
				var y = ev.clientY;
				var dx = x - w / 2;
				var dy = y - h / 2;
				var px0 = w / 24;
				var py0 = h / 24;

				var degx = -dx / px0;
				var degy = dy / py0;

				baselayer[0].style.transform = "rotateX(" + degy + "deg) rotateY(" + degx + "deg)";
			}
		</script>
	</body>

</html>